<template>
  <DndProvider :backend="HTML5Backend"
    ><a-table
      :dataSource="dataSource"
      :columns="columnsFilter"
      :pagination="query"
      @change="onChange"
      :row-key="record => record.tagId"
      :row-selection="rowSelectionActive ? rowSelection : null"
      :expanded-row-keys="expandedKeys"
      @expand="handleExpand"
      class="custom-table"
      style="display: flex; align-items: center"
    >
      <template #headerCell="{ column }">
        <template v-if="column.key === 'tagName'">
          <span>标签名</span>
          <img
            v-if="isShowAdd"
            :src="addImg"
            alt=""
            style="
              position: absolute;
              left: 91px;
              bottom: 0px;
              width: 14px;
              z-index: 99999999;
            "
          />
        </template>
      </template>
      <template #bodyCell="{ column = {}, record, index }">
        <DropType
          :key="record.tagId"
          :record="record"
          :column-key="column.key"
          :style="tableStyle"
          :column-index="index"
        >
        </DropType>
      </template>
      <template #emptyText>
        <div
          style="
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
          "
        >
          <a-spin :spinning="loading">
            <a-empty
              :image="notData"
              :description="loading ? '加载中...' : '暂无数据'"
            />
          </a-spin>
        </div>
      </template> </a-table
  ></DndProvider>
</template>
<script setup>
import { onMounted, computed, watch, ref, reactive } from 'vue'
import ATable from '@/components/table.vue'
import notData from '@/assets/images/not-data.png'

import { DndProvider } from 'vue3-dnd'
import { HTML5Backend } from 'react-dnd-html5-backend'

import DropType from './drop-row.vue'
import html2canvas from 'html2canvas'
import addImg from '@/assets/images/add.png'
import {
  useColumns,
  useQuery,
  useDataSourceManager,
  useDataSource,
  useLineheight,
  useLoading,
  useRowSelection,
  useRowSelectionActive,
  useExpandedKeys,
} from './provide-context.js'

const rowRefs = ref([])

/**
 * 复选框
 */
let rowSelection = useRowSelection()
let rowSelectionActive = useRowSelectionActive()
let expandedKeys = useExpandedKeys()
/**
 * 全局数据
 */
let columns = useColumns()
let dataSource = useDataSource()
let query = useQuery()
let loading = useLoading()
let lineheight = useLineheight()
let { update } = useDataSourceManager()
const isShowAdd = ref(false)
/**
 * 校验规则
 */
let rules = ref({
  tagName: [
    {
      // required: true,
      // message: '请输入',
      // trigger: 'change',
      validator(rule, value) {
        if (!value) return Promise.reject('此项不能为空!')
        if (!/^[\u4e00-\u9fa5_a-zA-Z0-9+-]+$/.test(value)) {
          return Promise.reject(
            '名称只能是中文、下划线、连字符、加号、数字、英文!',
          )
        }
        return Promise.resolve()
      },
    },
    // { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
  ],
})
/**
 * 表头
 */
let columnsFilter = computed(() => {
  return columns?.value?.filter(({ checked }) => checked) || []
})

let tableStyle = reactive({
  display: 'flex',
  alignItems: 'center',
  height: 65 + 'px',
})
/**
 * table组件分页、排序、筛选变化事件
 */
function onChange({ current, pageSize }, filters, sorter, { action }) {
  query.value.current = current
  query.value.pageSize = pageSize
  if (action !== 'paginate') {
    query.value.current = 1
    query.value.pageSize = 10
  }
  update()
}

//初始化调用
onMounted(async () => {
  query.value.current = 1
  query.value.pageSize = 10
  update()
})

const handleExpand = (expanded, record) => {
  if (expanded) {
    expandedKeys.value = [...expandedKeys.value, record.tagId]
  } else {
    expandedKeys.value = expandedKeys.value.filter(key => key !== record.tagId)
  }
}
watch(
  lineheight,
  (newHeight, oldHeight) => {
    if (newHeight === 'small') {
      tableStyle.height = 48 + 'px'
    } else if (newHeight === 'middle') {
      tableStyle.height = 56 + 'px'
    } else if (newHeight === 'large') {
      tableStyle.height = 65 + 'px'
    }
  },
  { immediate: true },
)
</script>
<style lang="less" scoped>
/* 取消 td的padding */
:deep(.ant-table-tbody > tr > td) {
  padding: 0;
}
.custom-table
  :global(
    .ant-table-wrapper .ant-table-row-indent + .ant-table-row-expand-icon
  ) {
  top: 20px !important;
}
</style>
